<template>
  <div class="evaluation px-[18px]">
    <div class="mt-[15PX] flex items-center justify-between evaluation-title" v-if="commentList?.length">
      <p>{{getLanguage(props.product.language).comment}}({{ commentList?.length }})</p>
      <p class="flex items-center"><el-rate disabled v-model="avgScore" size="large"/>({{commentAvgScore || 0}})</p>
    </div>
    <div class="overflow-hidden evaluation-box max-h-600PX" ref="scrollContainer">
      <div class="scroll-content" ref="scrollContent">
        <div class="evaluation-item" v-for="(item, index) in commentList" :key="index">
          <div class="flex justify-between">
            <div class="w-100%">
              <div class="flex items-center justify-between mb-[4PX] tinfo">
                <p class="text-[16PX] text-[red]">{{item.userNickname}}</p>
                <p class="text-[12PX] text-[#999]">{{ timestampToTime(item.commentTime) }}</p>
              </div>
              <p class="flex items-center">
                {{getLanguage(props.product.language).satisfaction}}：
                <el-rate disabled v-model="item.scores"/>
              </p>
              <p class="mt-2 content">{{item.content}}</p>
              <template v-for="(itm, idx) in item.picUrls" :key="idx">
                <img class="mt-3 w-80PX h-80PX" :src="itm" alt=""/>
              </template>
            </div>
          </div>
        </div>
        <!-- 复制内容的副本 -->
        <div class="evaluation-item" v-for="(item, index) in commentList" :key="'copy-' + index">
          <div class="flex justify-between">
            <div class="w-100%">
              <div class="flex items-center justify-between mb-[4PX] tinfo">
                <p class="text-[16PX] text-[red]">{{item.userNickname}}</p>
                <p class="text-[12PX] text-[#999]">{{ timestampToTime(item.commentTime) }}</p>
              </div>
              <p class="flex items-center">
                {{getLanguage(props.product.language).satisfaction}}：
                <el-rate disabled v-model="item.scores"/>
              </p>
              <p class="mt-2 content">{{item.content}}</p>
              <template v-for="(itm, idx) in item.picUrls" :key="idx">
                <img class="mt-3 w-80PX h-80PX" :src="itm" alt=""/>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { getLanguage } from "@/utils/langue";
  const props = defineProps({
    product: {
      type: Object,
      required: true
    },
    commentAvgScore: {
      type: Number,
      default: 0
    },
    commentList: {
      type: Array,
      default: () => []
    }
  })
const avgScore = ref<number>(props.commentAvgScore)
const scrollContainer = ref<HTMLElement | null>(null)
const scrollContent = ref<HTMLElement | null>(null)
let animationFrameId: number
let scrollPosition = 0
const scrollSpeed = 0.5 // 滚动速度，值越大滚动越快

const startScrolling = () => {
  if (!scrollContainer.value || !scrollContent.value) return;

  const containerHeight = scrollContainer.value.clientHeight;
  const contentHeight = scrollContent.value.clientHeight;

  // 如果内容高度小于容器高度，不需要滚动
  if (contentHeight <= containerHeight) return;

  // 计算实际的滚动距离，内容高度为原内容的两倍
  const scrollDistance = contentHeight / 2;

  const scroll = () => {
    scrollPosition += scrollSpeed;

    // 当滚动到内容末尾时，重置位置实现循环
    if (scrollPosition >= scrollDistance) {
      scrollPosition = 0; // 循环回到顶部
    }

    if (scrollContent.value) {
      scrollContent.value.style.transform = `translateY(-${scrollPosition}px)`;
    }

    animationFrameId = requestAnimationFrame(scroll);
  };

  animationFrameId = requestAnimationFrame(scroll);
};
onMounted(() => {
  startScrolling();
})
onUnmounted(() => {
  cancelAnimationFrame(animationFrameId)
})
  // 时间戳转 年-月-日 时:分:秒
  const timestampToTime = (timestamp: number) => {
    const date = new Date(timestamp)
    const Y = date.getFullYear() + '-'
    const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
    const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
    const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
    const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
    const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
    return Y + M + D + h + m + s
  }
</script>

<style lang="less" scoped>
  :deep(.el-rate__icon){
    font-size: 20PX !important;
  }
  .evaluation{
  .evaluation-box{
    overflow: hidden;
    .evaluation-title{


    }
    .evaluation-item {
      padding-bottom: 20PX;
      border-bottom: 1PX dotted #E0E0E0;
      margin-top: 10PX;
      .content{
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
      }
    }
  }
}

</style>
